<script setup lang="ts">
import { computed, ref } from 'vue'
import { useWatermarkStore } from '../../store/useWatermarkStore'
import { saveAs } from 'file-saver'
import { ElMessage } from 'element-plus'

const store = useWatermarkStore()
const dialogVisible = ref(true)

// 当前文件
const currentFile = computed(() => store.currentFile)

// 是否为图片
const isImage = computed(() => {
  return currentFile.value?.type.startsWith('image/') || false
})

// 是否为视频
const isVideo = computed(() => {
  return currentFile.value?.type.startsWith('video/') || false
})

// 下载结果
const downloadResult = () => {
  if (!currentFile.value?.resultUrl) {
    ElMessage.error('结果文件不存在')
    return
  }

  // 使用file-saver下载文件
  fetch(currentFile.value.resultUrl)
    .then(res => res.blob())
    .then(blob => {
      const fileName = currentFile.value?.name || 'result'
      saveAs(blob, `处理结果_${fileName}`)
      ElMessage.success('下载成功')
    })
    .catch(err => {
      ElMessage.error('下载失败: ' + (err.message || '未知错误'))
    })
}

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
  store.setCurrentFile(null)
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="currentFile?.name || '处理结果'"
    width="70%"
    :before-close="closeDialog"
  >
    <div class="result-container">
      <!-- 图片结果 -->
      <div v-if="isImage && currentFile?.resultUrl" class="result-view">
        <div class="comparison">
          <div class="original">
            <h4>原图</h4>
            <img :src="currentFile.url" alt="原图" />
          </div>
          <div class="result">
            <h4>处理结果</h4>
            <img :src="currentFile.resultUrl" alt="处理结果" />
          </div>
        </div>
      </div>
      
      <!-- 视频结果 -->
      <div v-else-if="isVideo && currentFile?.resultUrl" class="result-view">
        <div class="video-player">
          <h4>处理结果</h4>
          <video controls :src="currentFile.resultUrl" width="100%"></video>
        </div>
      </div>
      
      <!-- 处理中 -->
      <div v-else-if="currentFile?.status === 'processing'" class="processing">
        <el-progress type="circle" :percentage="currentFile.progress || 0" />
        <p>处理中，请稍候...</p>
      </div>
      
      <!-- 错误状态 -->
      <div v-else-if="currentFile?.status === 'error'" class="error">
        <el-icon><circle-close /></el-icon>
        <p>{{ currentFile.error || '处理失败' }}</p>
      </div>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button 
          type="primary" 
          :disabled="!currentFile?.resultUrl" 
          @click="downloadResult"
        >
          下载结果
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.result-container {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.result-view {
  width: 100%;
}

.comparison {
  display: flex;
  gap: 20px;
  width: 100%;
}

.original, .result {
  flex: 1;
  text-align: center;
}

.original h4, .result h4, .video-player h4 {
  margin-bottom: 10px;
  font-weight: 500;
  color: #606266;
}

.original img, .result img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.video-player {
  text-align: center;
  width: 100%;
}

.video-player video {
  max-height: 500px;
  border-radius: 4px;
  background-color: #000;
}

.processing, .error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
}

.error .el-icon {
  font-size: 48px;
  color: #f56c6c;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 